<template>
	<view class="content1">

		<view class="commonBox">
			<view class="commonBox-title">
				<view class="commonBox-title-left">
					<text>快捷发起</text>
				</view>
				<view class="commonBox-title-right">
					<uni-icons fontFamily="CustomFontPlatform" :size="18" color="#51d0d0"
						@click="showPopUp('menuConfig')">{{'\ue657'}}</uni-icons>
				</view>
			</view>
			<view class="commonBox-content">
				<swiper :indicator-dots="true" class="swiper" :current="swiperIndex" @change="onSwiperChange">
					<swiper-item v-for="page in Math.ceil(shortcuts.length/8)">
						<u-grid col="4">
							<u-grid-item
								:customStyle="{paddingTop:'10px',borderRadius:'5px',background:'linear-gradient(to bottom right, #F6F6F6, #FFFFFF)'}"
								v-for="(menu, menuIndex) in shortcuts.filter((item,index)=>index<(8*page) && index>=(page-1)*8)"
								:index="menuIndex" :key="menuIndex" @click="checkOutMenu(menu)">
								<uni-icons v-if="menu.CustomFont && menu.PIC_PH" :fontFamily="menu.CustomFont"
									:size="22" :color="menu.AP_Colour">{{ $utils.toUniCode(menu.PIC_PH) }}</uni-icons>
								<uni-icons v-else fontFamily="CustomFontPlatform" :size="22"
									color="#3ace4b">{{ $utils.toUniCode('&#xe62c;') }}</uni-icons>
								<text class="grid-text">{{ getAbbrev(menu.APFunName,7)	}}</text>
							</u-grid-item>
						</u-grid>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 条件选择 -->
		<view class="condition">
			<view class="condition-left">
				<uni-data-select v-model="ChoiceData" :clear="false" :localdata="radioOptions"></uni-data-select>
			</view>
			<view class="condition-right">
				<uni-datetime-picker v-model="singleTimes" @change="ChangeDate" type="daterange" :end="EndDate"
					rangeSeparator="至" :clear-icon="false"></uni-datetime-picker>
			</view>
		</view>

		<!-- Tab页签 -->
		<u-tabs style="flex: 1;" :list="TabList" :current="TabsIndex" @change="ChangeTab" lineColor="#51d0d0"
			:activeStyle="{'font-size':'32rpx','font-weight': '500'}"></u-tabs>

		<!-- 主内容 -->
		<view class="MainBox">
			<view class="charts-box">
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true"></qiun-data-charts>
			</view>

			<!-- 环形图 -->


			<view class="AnnularProgressBox">
				<!-- percent环形百分比 size尺寸大小； strokeWidth环形粗细 -->
				<view class="progressBox" v-if="ShowFun(item,index)" v-for="(item,index) in AnnularProgress"
					:key="index">
					<m-progress-circle :progress="Number(item.HGPercentage)" :canvasId="String(index)" :radius="60"
						:lineWidth="6" :innerTextSize="16" :progressColor="item.HGColor" :BottomTextSize="12">
					</m-progress-circle>
					<view class="text" :style="{'color':item.HGColor }">
						<text>{{item.HGText}}</text>
					</view>
				</view>
			</view>

			<view style="margin-top: 40px;">
				<uni-row class="CommonBox" v-if="ShowAnnular">
					<uni-col v-for="(item,index) in BottomList" :key="index" :span="12" class="CommonCardParent">
						<view class="CommonCard">
							<view class="Card">
								<u-icon :name="item.Icon" :color="item.IconColor" size="40"></u-icon>

								<view class="RightContent">
									<view>
										<text class="Nums">{{item.Nums}}</text>
										<text class="Unit">{{item.Unit}}</text>
									</view>
									<view>
										<text class="Text">{{item.Text}}</text>
									</view>
								</view>

							</view>
						</view>
					</uni-col>
				</uni-row>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperIndex: 0,
				module: {},
				shortcuts: [], // 已配置全部快捷菜单(默认+自定义)
				currModuleID: 3, // 当前模块ID
				currBoardID: 15, // 当前看板ID
				ChoiceData: 1,
				radioOptions: [{
						text: '数量',
						value: 1
					},
					{
						text: '批次',
						value: 2
					},
				],
				StartDate: null, // 限制开始时间
				EndDate: null, // 结束时间
				singleTimes: [], // 日期选择控件
				TabList: [ // Tabs标签数组
					{
						name: '来料检',
						value: 'LLJYD',
						id: 0
					}, {
						name: '首件检',
						value: 'SJJ',
						id: 1
					}, {
						name: '巡检',
						value: 'XJ',
						id: 2
					}, {
						name: '末件检',
						value: 'MJJ',
						id: 3
					}, {
						name: '成品检',
						value: 'CPJ',
						id: 4
					},
				],
				TabsIndex: 0, // 手动记录Tab的 active
				ChangeTypeList: [{ // 分段器内容
						name: '数量'
					},
					{
						name: '批次'
					},
				],
				curNow: 0, // 分段器索引
				curNowCopy: 0, // 分段器索引备份， 判断选中项是否是上次所选的，避免重复请求
				TypeTimer: null, // 简易的防抖，防止切换频繁
				chartData: {},
				opts: {
					color: ["#91CB74", "#EE6666", "#1890FF", "#FAC858", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 0, 0, 0],
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						// calibration: true,
						scrollShow: true,
						itemCount: 4,
						// min: 0,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							calibration: true,
							min: 0,
							// max: 100
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				},

				ShowAnnular: false,
				AnnularProgress: [], // 环形进度数据
				ResetData: [ // 环形进度数据重置
					{
						"HGPercentage": 0,
						"HGColor": "#4ADA88",
						"HGText": "合格率",
						"HGID": 0
					}, {
						"HGPercentage": 0,
						"HGColor": "#da4518",
						"HGText": "不合格率",
						"HGID": 1
					}, {
						"HGPercentage": 0,
						"HGColor": "#24b0da",
						"HGText": "让步放行",
						"HGID": 2
					},
				],

				BottomList: [ // 底部数据组
					{
						Icon: 'share',
						IconColor: '#ffb011',
						Nums: 0,
						Text: '检验次数',
						Unit: '次',
					}, {
						Icon: 'share',
						IconColor: '#ff785d',
						Nums: 0,
						Text: '不合格次数',
						Unit: '次',
					}, {
						Icon: 'share',
						IconColor: '#97ffa8',
						Nums: 0,
						Text: '合格次数',
						Unit: '次',
					},
				],
				request1: null,
				request2: null,
				request3: null,
			};

		},
		watch: {
			ChoiceData(newVal, oldVal) {
				var that = this;
				that.GetPageInfo();
			},

			curNow: {
				handler(newVal, oldVal) {
					var that = this;

					clearTimeout(that.TypeTimer);

					that.TypeTimer = setTimeout(() => {
						if (that.curNowCopy != newVal) { // 判断选中项是否是上次所选的，避免重复请求

							// 获取页面数据
							this.GetPageInfo();

							that.curNowCopy = newVal; // 记录当前选中
						}
					}, 600);
				},
				// immediate: true
			}
		},
		onReady() {
			// var that = this;
			// this.$utils.showLoading();
			// // 设置限制时间范围
			// // that.StartDate = dateFormat((new Date()).getTime() - 1000 * 60 * 60 * 24 * 10, 'yyyy-MM-dd')
			// that.EndDate = dateFormat((new Date()).getTime(), 'yyyy-MM-dd')

			// // 设置初始化时间
			// that.singleTimes = [dateFormat((new Date()).getTime() - 1000 * 60 * 60 * 24 * 30 * 2, 'yyyy-MM-dd'),
			// 	dateFormat((
			// 		new Date()).getTime(), 'yyyy-MM-dd')
			// ];

			// setTimeout(() => {
			// 	// 获取页面数据
			// 	that.GetPageInfo();
			// }, 500);

		},

		created() {
			var that = this;
			// this.$utils.showLoading();


			// 设置限制时间范围
			// that.StartDate = dateFormat((new Date()).getTime() - 1000 * 60 * 60 * 24 * 10, 'yyyy-MM-dd')
			that.EndDate = dateFormat((new Date()).getTime(), 'yyyy-MM-dd')

			// 设置初始化时间
			that.singleTimes = [dateFormat((new Date()).getTime() - 1000 * 60 * 60 * 24 * 30 * 2, 'yyyy-MM-dd'),
				dateFormat((
					new Date()).getTime(), 'yyyy-MM-dd')
			];

			setTimeout(() => {
				that.initShortcut();
				// 获取页面数据
				that.GetPageInfo();
			}, 500);
		},

		methods: {

			onSwiperChange(e) {
				this.swiperIndex = e.detail.current;
			},


			// 快捷菜单初始化
			initShortcut() {
				let that = this;
				that.module = that.$store.state.appConfigInfo.APPModules.find(item => item.ModuleID == that.currModuleID);
				let str = uni.getStorageSync('shortcuts' + that.currBoardID); // 获取缓存快捷菜单

				if (str) { // 存在快捷菜单缓存,则对比后更新
					let shortcuts = JSON.parse(str);
					let Menus1 = that.module.shortcuts.filter(item => item.IsShortcut && item.KanBanID == that
						.currBoardID); // 当前看板默认菜单
					let Menus2 = that.compareMenus(shortcuts, that.module.authPages); // 非默认菜单(范围包含app模块下其他看板默认和所有其他授权菜单)

					that.shortcuts = [...Menus1, ...Menus2];
				} else { // 当前看板默认菜单
					that.shortcuts = that.module.shortcuts.filter(item => item.IsShortcut && item.KanBanID == that
						.currBoardID);
				}

				if (that.swiperIndex >= Math.ceil(that.shortcuts.length / 8)) {
					that.swiperIndex = Math.ceil(that.shortcuts.length / 8) - 1;
				}

				that.persistShortcut(that.shortcuts);
			},

			// 比较缓存非默认快捷菜单并返回
			compareMenus(oldMenu, newMenu) {
				let that = this;
				let menus = oldMenu.filter(item => {
					// 当前看板非默认菜单和其他看板所有菜单
					if ((item.KanBanID == that.currBoardID && !item.IsShortcut) || (item.KanBanID != that
							.currBoardID)) {
						return item;
					}
				})
				menus.forEach((item, index) => {
					let flag = newMenu.some(m => m.APPFunID == item.APPFunID);
					if (!flag) {
						menus.splice(index, 1);
					}
				});

				return menus;
			},

			// 持久化快捷菜单
			persistShortcut(shortcuts) {
				let that = this;
				that.$store.commit('ChangeAndSetStateData', {
					Name1: 'shortcuts' + that.currBoardID,
					data: shortcuts,
					StorageName: 'shortcuts' + that.currBoardID,
					StorageData: JSON.stringify(shortcuts)
				});
			},

			// 显示快捷菜单设置
			showPopUp() {
				let that = this;

				let data = {
					currModuleID: that.currModuleID,
					currBoardID: that.currBoardID,
					currModule: that.module,
					currShortcut: that.shortcuts
				}
				// console.log(data);
				that.$store.commit('ChangeAndSetStateData', {
					Name1: 'shortcutSetting',
					data: data
				});

				uni.navigateTo({
					url: '/commonPage/kanban/ShortcutSetting/shortcutSetting',
					events: {
						refreshShortcut() {
							that.initShortcut();
						}
					}
				})
			},

			// 菜单字数截取(菜单名称,截取字数)
			getAbbrev(menuName, num) {
				let result = '';
				if (menuName.length > num) {
					result = menuName.substring(0, num);
				} else {
					result = menuName;
				}
				return result;
			},

			initModule(module, menu) {
				let that = this;
				console.log(module)

				// 发起请求获取模块页面数据
				try {
					this.Request.request('getAPPModulePages', {
						UserID: this.$store.state.UserInfo.UserID,
						APPType: module.ModuleID,
					}, (ret) => {
						console.log(ret);
						if (ret.status === 200) {
							const {
								ds: data,
								ds1
							} = ret.data;

							// 使用 Map 预处理 ds1，以 APPFunID 为键
							const ds1Map = new Map();
							ds1.forEach(row => {
								if (!ds1Map.has(row.APPFunID)) {
									ds1Map.set(row.APPFunID, []);
								}
								ds1Map.get(row.APPFunID).push(row);
							});

							// 组织并排序数据
							let organizedData = that.organizeByTreeTypeName(data, ds1Map)
								.sort((a, b) => a.TreeType - b.TreeType);

							// 提取 TabbarData 和 workspaceData
							const TabbarData = [];
							const workspaceData = [];
							organizedData.forEach(item => {
								item.Node.forEach(row => {
									if (row.IsTabbar) {
										TabbarData.push(row);
									} else {
										workspaceData.push(row);
									}
								});
							});
							// 对结果进行排序
							TabbarData.sort((a, b) => a.APFunCode - b.APFunCode);
							workspaceData.sort((a, b) => a.APFunCode - b.APFunCode);

							console.log(organizedData)

							// 持久化模块数据
							that.$store.commit('ChangeAndSetStateData', {
								Name1: 'appConfigInfo.ModuleInfo_All',
								data: organizedData,
								StorageName: 'ModuleInfo_All',
								StorageData: JSON.stringify(organizedData),
							});

							that.$store.commit('ChangeAndSetStateData', {
								Name1: 'appConfigInfo.Module_Tabbar',
								data: TabbarData,
								StorageName: 'Module_Tabbar',
								StorageData: JSON.stringify(TabbarData),
							});

							// 更新活动模块到 Vuex 存储
							that.$store.commit('ChangeAndSetStateData', {
								Name1: 'appConfigInfo.ActiveModule',
								data: module,
								StorageName: 'ActiveModule',
								StorageData: JSON.stringify(module),
							});

							uni.setStorageSync('OrderID', menu.APPFunID);

							uni.navigateTo({ // 前往表单界面 lucksheet
								url: '/st_qms/index/DocumentPage'
							});

						}
					}, (err) => {
						// 处理错误
						this.$utils.hideLoading();
						console.log(err);
						console.log('----------------');
					});

				} catch (e) {
					//TODO handle the exception
					this.$utils.hideLoading();
					console.log(e);
					console.log('===========');
				}
			},
			organizeByTreeTypeName(arr, ds1Map) {
				// 创建一个 Map 以按 TreeTypeName 分组数据
				const groupedData = new Map();

				arr.forEach(item => {
					const {
						TreeTypeName,
						TreeType,
						appType,
						APPFunID
					} = item; // 解构赋值，提高可读性

					// 如果没有该分组，则初始化
					if (!groupedData.has(TreeTypeName)) {
						groupedData.set(TreeTypeName, {
							TreeType,
							APPType: appType,
							Node: [], // 初始化 Node 数组
						});
					}

					// 获取 IconApprove，default 为空数组
					const iconApprove = ds1Map.get(APPFunID) || [];

					// 将当前项添加到对应的 Node 中
					groupedData.get(TreeTypeName).Node.push({
						...item,
						IconApprove: iconApprove,
					});
				});

				// 从 Map 转换为数组并返回
				return Array.from(groupedData, ([treeTypeName, group]) => ({
					TreeTypeName: treeTypeName,
					...group,
				}));
			},
			ShowFun(data, index) {
				if (this.curNow == 0 && index == 2) {
					return false;
				} else {
					return true;
				}
			},
			sectionChange(index) { // 切换显示状态
				var that = this;
				if (this.curNow == index) return;
				this.$utils.showLoading();
				this.curNow = index;
			},
			ChangeDate() { // 修改日期
				var that = this;

				that.RefreshBtn();
			},
			RefreshBtn() { // 刷新
				var that = this;

				that.ChangeTab(that.TabList[that.TabsIndex])
			},
			ChangeTab(data) { // 切换Tab栏
				var that = this;
				this.$utils.showLoading();

				// 因为切换Tab无法改变索引，手动记录一下
				that.TabsIndex = data.id

				setTimeout(() => {
					that.GetPageInfo()
				}, 500)
			},
			GetPageInfo() {
				let that = this;

				let data = this.TabList[this.TabsIndex];
				try {
					/* 获取charts数据 */
					let obj = {
						FType: data.value, // 检验项
						FBdate: that.singleTimes[0], // 开始时间
						FEdate: that.singleTimes[1], // 结束时间
						// LX: that.curNow + 1, // 数量 1 ；批次 2
						LX: that.ChoiceData, // 数量 1 ；批次 2
					};
					that.request1 = that.Request.PromiseRequest('JYTJJK', obj);

					that.request1.promise.then((data) => {
						let res = {
							categories: [], // x轴数据
							series: []
						}

						let obj = {
							name: '合格数',
							data: []
						}
						let BHGObj = {
							name: '不合格数',
							data: []
						}
						console.log(data)
						if (data.status == 200) {

							data.data.ds.forEach(item => {
								res.categories.push(add0(item.DAY))

								obj.data.push(item.HGNumber)
								BHGObj.data.push(item.BHGNumber)
							})

							res.series.push(obj)
							res.series.push(BHGObj)
							that.chartData = JSON.parse(JSON.stringify(res));
						}


					}).then((result) => {
						this.request1 = null;

						/* 获取环形图数据 */
						that.request2 = that.Request.PromiseRequest('JYTJJK2', obj);
						return that.request2.promise;
					}).then((result) => {
						this.request2 = null;

						if (result.status == 200) {

							let NewData = JSON.parse(JSON.stringify(that.ResetData))
							if (result.data.ds.length) {
								NewData[0]['HGPercentage'] = result.data.ds[0]['HGPercentage']
								NewData[1]['HGPercentage'] = result.data.ds[0]['BHGPercentage']
								NewData[2]['HGPercentage'] = result.data.ds[0]['RBFXHGPercentage']
								that.AnnularProgress = NewData.sort(customSort)
							} else {
								that.AnnularProgress = that.ResetData.sort(customSort)
							}
						}


						/* 获取环形图数据 */
						that.request3 = that.Request.PromiseRequest('JYTJJK3', obj);
						return that.request3.promise;
					}).then((data) => {
						// 请求2成功的处理逻辑
						if (data.status == 200) {

							let Arr = [ // 底部数据组
								{
									Icon: 'share',
									IconColor: '#ffb011',
									Nums: 0,
									Text: '检验数量',
									Unit: '个',
								}, {
									Icon: 'share',
									IconColor: '#ff785d',
									Nums: 0,
									Text: '不合格数量',
									Unit: '个',
								}, {
									Icon: 'share',
									IconColor: '#97ffa8',
									Nums: 0,
									Text: '合格数量',
									Unit: '个',
								},
							];


							Arr[0].Nums = data.data.ds[0].JYSL;
							Arr[1].Nums = data.data.ds[0].BHGSL;
							Arr[2].Nums = data.data.ds[0].HGSL;

							if (data.data.ds[0].RBCS >= 0) {
								Arr[3] = {
									Icon: 'share',
									IconColor: '#4e77ff',
									Nums: data.data.ds[0].RBCS,
									Text: '让步批次',
									Unit: '次',
								}
							}

							if (that.curNow == 1) {
								Arr[0].Text = '检验批次';
								Arr[1].Text = '不合格批次';
								Arr[2].Text = '合格批次';

								Arr.map(item => {
									item.Unit = '次'
								})
							}

							that.BottomList = Arr;

							// that.BottomList[3].Nums = data.data.ds[0].RBCS || null;

							that.ShowAnnular = true;
						}

						this.$utils.hideLoading();

						that.$refs.paging.endRefresh();
					}).catch((error) => {
						this.$utils.hideLoading();
						that.$refs.paging.endRefresh();

						uni.showToast({
							title: '请求失败，请重试',
							icon: 'none'
						})
					});

				} catch (e) {
					// TODO handle the exception
					console.log(JSON.stringify(e))
					this.$utils.hideLoading();
					that.$refs.paging.endRefresh();
				}
			},
			// 跳转当前菜单页面
			checkOutMenu(menu) {
				let that = this;
				console.log(that.$store.state.appConfigInfo.APPModules);

				let filterData = that.$store.state.appConfigInfo.APPModules.filter(item => item.ModuleName == menu.APPTypeName)

				console.log(filterData);
				if (filterData.length) {
					that.initModule(filterData[0], menu)
				}

			},
		}
	}

	/** 根据数组对象中的属性名，重排数组
	 * @param TypeName  	数组对象中对比的属性名
	 * @param ChangeList  	对比的数组
	 */
	const ChangeList = ['合格率', '不合格率', '让步放行'];
	const customSort = (a, b) => {
		// 获取字符串在数组中的索引
		let indexA = ChangeList.indexOf(a['HGText']);
		let indexB = ChangeList.indexOf(b['HGText']);

		// 比较索引值并返回排序结果
		return indexA - indexB
	}

	//修改月、天的格式，保持两位数显示
	const add0 = (m) => {
		return m < 10 ? '0' + m : m
	}

	// 转时间格式
	const dateFormat = (date, fmt) => {
		date = new Date(date)
		var a = ['日', '一', '二', '三', '四', '五', '六']
		var o = {
			'M+': date.getMonth() + 1, // 月份
			'd+': date.getDate(), // 日
			'h+': date.getHours(), // 小时
			'm+': date.getMinutes(), // 分
			's+': date.getSeconds(), // 秒
			'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
			'S': date.getMilliseconds(), // 毫秒
			'w': date.getDay(), // 周
			'W': a[date.getDay()], // 大写周
			'T': 'T'
		}
		if (/(y+)/.test(fmt)) {
			fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
		}
		for (var k in o) {
			if (new RegExp('(' + k + ')').test(fmt)) {
				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k])
					.length)))
			}
		}
		return fmt
	}
</script>

<style lang="scss">
	$h-padding: 5px;
	$v-padding: 10px;
	$radius: 5rpx;

	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.condition-right ::v-deep .uni-calendar__content {
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom) / 2);
	}

	.content1 {
		/* 给顶部盒子安全高度 */
		// padding-top: var(--status-bar-height);
		// display: flex;
		// flex-direction: column;
		// height: 94vh;
		background-color: rgba(222, 222, 222, .1);

		.condition {
			display: flex;
			align-items: center;
			padding-top: 28rpx;
			padding-bottom: 14rpx;

			&-left {
				width: 150rpx;
				margin-right: 20rpx;
			}

			&-right {
				flex: 1;
			}
		}

		.head-index {

			.u-navbar__content__right {
				.u-icon__icon {
					color: #fff !important;
				}
			}

			// 顶部导航栏 navbar点击左侧会有改变透明的的操作，直接强制赋值为1
			.u-navbar__content__left {
				opacity: 1 !important;
			}
		}

		// 时间
		.example-body {
			padding: 6px 20px;
			color: #fff;
			// background-color: #51d0d0;

			.uni-date-editor--x {
				background-color: #fff;
			}
		}

		// Tab页签
		.u-tabs__wrapper__nav {
			color: #fff !important;
			background-color: #51d0d0 !important;

			.u-tabs__wrapper__nav__item__text {
				color: #fff !important;
			}
		}

		.u-tabs__wrapper__nav__item {
			width: fit-content !important;
		}

		.MainBox {
			flex: 1;
			padding: 20rpx 15rpx 30rpx 15rpx;
			overflow: auto;
			background-color: #fff;
			// padding-bottom: 50rpx;
		}
	}

	.u-nav-slot {
		/* min-width: 80px; */
		width: fit-content;
	}

	.uni-select {
		min-width: 150px;
		border: none !important;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}

	.AnnularProgressBox {
		display: flex;
		justify-content: space-around;
		align-items: center;

		.progressBox {
			position: relative;
			width: 180rpx;
			height: 180rpx;
			margin: 0 auto;
			margin-top: 33rpx;

			.centerTxt {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

				.num {
					font-size: 22rpx;
					font-family: Arial;
					font-weight: bold;
					// color: #38393A;
				}
			}

			.text {
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: 400;
				// color: #8A8B8B;
				margin-top: 10rpx;
				text-align: center !important;
			}
		}
	}

	// .u-grid-item {
	// 	flex-direction: row !important;
	// 	align-items: center;
	// 	padding: 20rpx 0;

	// 	.grid-text {
	// 		font-size: 14px;
	// 		color: #909399;
	// 		padding: 10rpx 0 20rpx 0rpx;
	// 		/* #ifndef APP-PLUS */
	// 		box-sizing: border-box;
	// 		/* #endif */
	// 	}
	// }

	// 圆环
	.u-progress-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-progress-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #fb9126;
	}

	.u-progress-info {
		font-size: 28rpx;
		padding-left: 16rpx;
		letter-spacing: 2rpx
	}

	// 底部宫格样式
	.CommonBox {

		.CommonCardParent {

			// &:first-child {
			// 	border-right: 1px solid;
			// 	border-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 187, 242, 0.4) 60%, rgba(0, 187, 242, 0.6) 99%) 2 2 2 2;
			// }

			// &:nth-child(2) {
			// 	border-bottom: 1px solid;
			// 	border-image: linear-gradient(90deg, rgba(0, 187, 242, 0.6) 99%, rgba(0, 187, 242, 0.4) 60%, rgba(255, 255, 255, 0) 0%) 2 2 2 2;
			// 	// border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(0, 187, 242, 0.4) 60%, rgba(0, 187, 242, 0.6) 99%) 2 2 2 2;
			// }

			// &:nth-child(3) {
			// 	border-top: 1px solid;
			// 	border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(0, 187, 242, 0.4) 60%, rgba(0, 187, 242, 0.6) 99%) 2 2 2 2;
			// }

			// &:nth-child(4) {
			// 	border-left: 1px solid;
			// 	border-image: linear-gradient(180deg, rgba(0, 187, 242, 0.6) 99%, rgba(0, 187, 242, 0.4) 60%, rgba(255, 255, 255, 0) 0%) 2 2 2 2;
			// 	// border-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 187, 242, 0.4) 60%, rgba(0, 187, 242, 0.6) 99%) 2 2 2 2;
			// }

			.CommonCard {
				width: 100%;
				text-align: center;
				padding: 20px 0;

				.Card {
					display: flex;
					align-items: center;
					justify-content: center;

					.RightContent {
						margin-left: 12rpx;
						color: #707070;

						.Nums {
							font-size: 20px;
						}

						.Unit {
							font-size: 12px;
							margin-left: 4px;
						}

						.Text {
							font-size: 14px;
						}
					}
				}
			}

		}
	}

	//设置轮播的指示点大小
	.swiper {
		height: 160px;

		::v-deep .uni-swiper-dots {
			// 指示点整个区域
			bottom: 10rpx;
		}

		::v-deep .uni-swiper-dot {
			// 指示点元素默认样式
			width: 10rpx;
			height: 6rpx;
			border-radius: 4rpx;
		}

		::v-deep .uni-swiper-dot-active {
			// 指示点元素激活（当前选中）状态样式
			width: 20rpx;
			background: #51d0d0;
		}
	}

	// 快捷菜单宫格
	.grid-text {
		font-size: 12px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.commonBox {
		display: flex;
		flex-direction: column;
		padding: $v-padding $h-padding;
		background-color: #ffffff;
		margin-bottom: $v-padding;
		border-radius: $radius;

		&-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 $h-padding $v-padding $h-padding;

			&-left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 150rpx;
				font-size: 14px;
				font-weight: 500;
			}

			&-right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				width: 100rpx;
			}
		}

		&-content {
			display: flex;
			flex-direction: column;
		}
	}
</style>